<template>
  <el-container class="el-container-h">
    <el-main v-loading="loading">
      <el-steps :active="active" finish-status="success" simple>
        <el-step v-for="(item, key) in data" :key="key" :title="item.name" />
      </el-steps>
      <el-form ref="form" label-width="100px" class="step-form">
        <el-form-item v-for="(item, key) in formData" :key="key" :label="item.name">
          <el-input v-model="item.value" />
        </el-form-item>
      </el-form>
      <div align="center">
        <el-button type="primary" @click="next">下一步</el-button>
        <el-button @click="next">跳过</el-button>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Testpct',
  data() {
    return {
      data: [{
        'id': 'flow-01',
        'name': '流程-01',
        'privillege': true,
        'info': [{ 'id': 'category_id', 'name': '类型', 'value': 'flow' }, { 'id': 'relation_id', 'name': '关系', 'value': '5' }]
      },
      {
        'id': 'flow-02',
        'name': '流程-02',
        'privillege': true,
        'info': [{ 'id': 'target_id', 'name': '目标', 'value': 'yes' }, { 'id': 'origin_id', 'name': '来源', 'value': 'no' }]
      },
      {
        'id': 'flow-03',
        'name': '流程-03',
        'privillege': true,
        'info': [{ 'id': 'category_id', 'name': '类型', 'value': 'flow' }, { 'id': 'relation_id', 'name': '关系', 'value': '5' }]
      },
      {
        'id': 'flow-04',
        'name': '流程-04',
        'privillege': true,
        'info': [{ 'id': 'target_id', 'name': '目标', 'value': 'yes' }, { 'id': 'origin_id', 'name': '来源', 'value': 'no' }]
      }],
      active: 1,
      formData: [],
      loading: false
    }
  },
  computed: {
    ...mapState({
      service: state => state.service
    })
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化
    initData() {
      this.formData = this.data[this.active].info || []
    },
    next() {
      if (this.active++ > 2) { this.active = 0 }
      this.formData = this.data[this.active].info || []
    }
  }
}
</script>
<style>
.explorer-content {
  position: relative;
}
</style>
<style scoped>
.el-container-h {
  width: 100%;
  height: 100%;
  position: absolute;
}
.el-main {
  position: relative;
}
.step-form {
  width: 45rem;
  margin: 4rem auto;
}
</style>
